import React, { Component,lazy,Suspense } from 'react';
import "./index.css"

import { Route,Redirect,Switch,Link,NavLink } from 'react-router-dom'

import NotFound from '../NotFound'
import Tabbar from '../../components/Tabbar';
import MyTabbar from '../../components/MyTabbar';

import RouterView from '../../router/RouterView';

// import Home from './Home'
// import Cate from './Cate'
// import Gwc from './Gwc'
// import Mine from './Mine'

// var Home = lazy(()=>import('./Home'));
// var Cate = lazy(()=>import('./Cate'));
// var Gwc = lazy(()=>import('./Gwc'));
// var Mine = lazy(()=>import('./Mine'));

class Index extends Component {
    
    render() {
        return (
            <div className='index'>
                Index
                {/* <Suspense fallback={<div className='loading'>loading...</div>}>
                    <Switch>
                        <Route exact path="/index/home" component={Home}></Route>
                        <Route exact path="/index/cate" component={Cate}></Route>
                        <Route exact path="/index/gwc" component={Gwc}></Route>
                        <Route exact path="/index/mine" component={Mine}></Route>
                        <Redirect exact from="/index" to="/index/home" />
                        <Route path="*" component={NotFound}></Route>
                    </Switch>
                </Suspense> */}
                
                {/* this.props.routes 当前组件内的嵌套路由的配置信息 */}
                {/* RouterView 根据 嵌套路由的配置信息 渲染对应的路由规则 */}
                <RouterView routes={this.props.routes} />

                {/* Link 和 NavLink 称作"标签式导航" */}
                {/* Link 最终渲染成a标签, 可以点击后跳路由 */}
                {/* NavLink 最终渲染成a标签, 可以点击后跳路由, 它会自动维护active类的添加/移除 */}

                {/* <div className="tabbar">
                    <NavLink to="/index/home">首页</NavLink>
                    <NavLink to="/index/cate">分类</NavLink>
                    <NavLink to="/index/gwc">购物车</NavLink>
                    <NavLink to="/index/mine">我的</NavLink>
                </div> */}

                {/* <Tabbar /> */}

                <MyTabbar />

            </div>
        );
    }
}

export default Index;